<!-- 预约订单详情 -->
<template>
    <view class="contact">
        <up-navbar :title="OrderStatus()" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="mx-[30rpx] my-[24rpx] bg-[#fff] p-[16rpx] rounded-[16rpx]">
            <view class="beijing flex rounded-[16rpx]">
                <view class="py-[4rpx] px-[8rpx] typeBg text-[20rpx] text-[#fff] font-normal">{{ OrderStatus() }}</view>
                <view class="text-[30rpx] text-[#333] font-bold ml-[20rpx]">预约信息{{ OrderStatus() }}</view>
            </view>
        </view>
        <view class="bg-[#fff] rounded-[16rpx] mx-[30rpx] my-[24rpx]">
            <view class="p-[30rpx] flex ">
                <up-image :src="baseUrl+Info.travel?.pic" width="136rpx" height="136rpx" radius="4"></up-image>
                <view class="flex flex-col justify-between ml-[24rpx] flex-1">
                    <view>
                        <view class="text-[30rpx] text-[#333] font-bold mb-[4rpx]">{{ Info.travel?.name }}</view>
                        <view class="text-[24rpx] text-[#666] font-normal">地址:{{ Info.travel?.address }}</view>
                    </view>
                    <view class="flex items-center">
                        <view v-for="(item,index) in Info.travel?.feature" :key="index" class="py-[2rpx] px-[10rpx] text-[18rpx] text-[#46a7fd] font-normal bg-[#DAEDFF] mr-[8rpx]">{{ item }}</view>
                    </view>
                </view>
            </view>
            <up-line></up-line>
            <view class="p-[30rpx] flex justify-between items-end">
                <view class="">
                    <view class="flex mb-[16rpx]">
                        <view class="text-[28rpx] text-[#333] font-normal">创建时间：</view>
                        <view class="text-[28rpx] text-[#46A7FD] font-normal">{{ Info.createTime }}</view>
                    </view>
                    <view>
                        <view class="text-[28rpx] text-[#333] font-normal">预约支付金额</view>
                        <priceNumber :price="Info.payPrice"></priceNumber>
                    </view>
                </view>
                <view @click="OrderCancel" v-if=" Info.status == 101 || Info.status == 201 " class="text-[26rpx] text-[#333] font-normal py-[16rpx] px-[28rpx] border-[1rpx] border-[#e5e5e5] rounded-[18rpx]">取消订单</view>
            </view>
        </view>
        <view class="mx-[30rpx] my-[24rpx] bg-[#fff] p-[30rpx] rounded-[16rpx]">
            <view class="flex items-center mb-[30rpx]">
                <image src="../static/zhong.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                <view class="text-[26rpx] text-[#333] font-bold ml-[12rpx] after">预约信息</view>
            </view>
            <template v-for="(item,index) in Info.presonList" :key="index">
                <view class="flex items-center justify-between mb-[30rpx]">
                    <view class="text-[24rpx] text-[#333] font-normal">预约人姓名</view>
                    <view class="text-[24rpx] text-[#333] font-normal">{{ item.userName }}</view>
                </view>
                <view class="flex items-center justify-between mb-[30rpx]">
                    <view class="text-[24rpx] text-[#333] font-normal">预约手机号</view>
                    <view class="text-[24rpx] text-[#333] font-normal">{{ item.mobile }}</view>
                </view>
            </template>
            <!-- <view class="flex items-center justify-between">
                <view class="text-[24rpx] text-[#333] font-normal">预约时间</view>
                <view class="text-[24rpx] text-[#333] font-normal">2024-04-08 23:59:59</view>
            </view> -->
        </view>
        <view class="px-[30rpx] bg-[#fff] rounded-[16rpx] mx-[30rpx] my-[24rpx]">
            <view class="flex py-[30rpx] justify-between items-center">
                <view class="text-[24rpx] text-[#333] font-normal">订单编码</view>
                <view class="flex items-center">
                    <view class="text-[24rpx] text-[#333] font-normal mr-[24rpx]">{{ Info.orderSn }}</view>
                    <view class="px-[14rpx] py-[8rpx] text-[18rpx] text-[#333] font-normal rounded-[40rpx] bg-[#F7F8FA]">复制</view>
                </view>
            </view>
            <up-line></up-line>
            <view class="py-[30rpx]">
                <view class="flex items-center justify-between">
                    <view class="text-[24rpx] text-[#333] font-normal">创建时间</view>
                    <view class="text-[24rpx] text-[#333] font-normal">{{ Info.createTime }}</view>
                </view>
                <view class="flex items-center justify-between mt-[30rpx]">
                    <view class="text-[24rpx] text-[#333] font-normal">预支付金额</view>
                    <view class="text-[24rpx] text-[#f00] font-bold">￥{{ Info.payPrice }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import env from '@/config/common.js';
import { onLoad } from '@dcloudio/uni-app';
import priceNumber from '@/components/priceNumber.vue';
import { GetSojournOrderDetail, GetTravelCancel } from '../../API/sojourn';
const { goback , gohome } = useTab()
const { id , getInfo , Info , OrderStatus , OrderCancel } = useInfo()
const baseUrl = ref(env.API_BASE_URL_DEV)
function useTab(){
    const goback = () => {
        uni.navigateBack()
    }
    const gohome = () => {
        uni.switchTab({
            url:'/pages/index/index'
        })
    }
    return {
        goback,
        gohome
    }
}

function useInfo(){
    const id = ref(0)
    const Info = ref(null)
    const getInfo = async (id)=>{
        let { data } = await GetSojournOrderDetail(id)
        Info.value = data
    }
    const OrderStatus = ()=>{
        return Info.value.status == 101 ? '待预约' : Info.value.status == 201 ? '已预约' : Info.value.status == 301 ? '已完成' : Info.value.status == 302 ? '已过期' : Info.value.status =401 ? '退款中' : '已退款'
    }
    const OrderCancel =  ()=>{
        uni.showModal({
            title: '提示',
            content: '是否取消预约',
            showCancel: true,
            success: async ({ confirm, cancel }) => {
                if(confirm){
                    let { data } = await GetTravelCancel({id:Info.value.id})
                    uni.showToast({
                        title: '取消成功',
                        icon:'none'
                    })
                    await getInfo(id.value)
                }
            }
        })
    }
    return { id , getInfo , Info , OrderStatus , OrderCancel }
}

onLoad( async (options)=>{
    id.value = options.id
    await getInfo(id.value)
})
</script>

<style lang="scss" scoped>
.contact{
    background-color: #f5f7f9;
    min-height: 100vh;
}
.beijing{
    padding: 28rpx 24rpx;
    background: linear-gradient( 90deg, #F0F2F5 0%, #FFFFFF 100%);
}
.typeBg{
    border-radius: 4rpx;
    background: linear-gradient( 90deg, #4ABD4F 0%, #4ABD82 100%);
}
.after{
    z-index: 1;
    position: relative;
    &::after{
        left:0;
        bottom: 0;
        z-index: -1;
        content: '';
        width: 110rpx;
        height: 12rpx;
        position: absolute;
        border-radius: 8rpx;
        background-color: #DAEDFF;
        transform: translateY(0,-50%);
    }
}
</style>